<template>
  <div id="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="小区名">
        <el-input v-model="name" placeholder="请输入小区名称"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="searchQuarters()">查询</el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="quartsList"
      stripe
      style="width: 100%">
      <el-table-column
        prop="name"
        label="小区名"
        width="140">
      </el-table-column>
      <el-table-column
        prop="img"
        label="图片"
        width="130">
        <template slot-scope="scope">
          <img style="width:80px;height: 80px;border-radius: 50%"
               :src="'http://139.224.186.148:10001/imgs/'+scope.row.img"
          />

        </template>
      </el-table-column>


      <el-table-column
        prop="green"
        label="绿化"
        width="80">
      </el-table-column>
      <el-table-column
        prop="years"
        label="年代"
        width="80">
      </el-table-column>
      <el-table-column
        prop="elevator"
        label="电梯"
        width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.elevator == 1">有</span>
          <span v-if="scope.row.elevator == 2">无</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="plotRatio"
        label="容积率"
        width="80">
      </el-table-column>

      <el-table-column
        prop="priceRatio"
        label="楼盘价格系数"
        width="130"
        align="center">
      </el-table-column>

      <el-table-column
        prop="property"
        label="物业">
      </el-table-column>

      <el-table-column
        prop="propertyPhone"
        label="物业电话">
      </el-table-column>
      <el-table-column
        label="操作"
        width="160"
        align="center"
      >
        <template slot-scope="scope">
          <router-link :to="'/quarters/edit/'+scope.row.id">
            <el-button
              type="waring" round
              size="small"
            >
              修改
            </el-button>
          </router-link>
        </template>
      </el-table-column>
    </el-table>


    <div class="block">

      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[2,4,6,8]"
        :page-size="size"
        :total="total"
        :current-page.sync="num">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import quarters from "@/api/quarters";

export default {
  name: "list",
  data() {
    return {
      num: 1,
      size: 2,
      total: 0,
      pages: 0,
      name: '',
      quartsList: []
    }
  },
  methods: {

    searchQuarters() {
      this.initQuarters()
    },
    handleCurrentChange(num) {
      this.num = num
      this.initQuarters()
    },
    handleSizeChange(size) {
      this.num = 1
      this.size = size
      this.initQuarters()

    },
    initQuarters() {
      quarters.getList(this.num, this.size, this.name).then(res => {
        const {data} = res
        this.quartsList = data.quartersPageInfo.list
        this.num = data.quartersPageInfo.pageNum;
        this.size = data.quartersPageInfo.pageSize;
        this.total = data.quartersPageInfo.total;
      })
    }
  },
  created() {
    this.initQuarters()
  }
}
</script>

<style scoped>

</style>
